<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>MultiVariant linear visualization</title>

    <link rel="stylesheet" href="/javascripts/arcgis_js_api/library/3.16/3.16/esri/css/esri.css">
    <script src="/javascripts/arcgis_js_api/library/3.16/3.16/init.js"></script>

    <style>
        html, body, #map{
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
        }
        #map {
            position: relative;
        }
        #hbt {
            position: absolute;
            top: 95px;
            left: 20px;
            z-index: 50;
        }
        #info{
            top: 0px;
            right: 0px;
            position: absolute;
            z-index: 99;
            opacity: 0.9;
            background-color: whitesmoke;
            border-bottom-left-radius: 8px;
            padding: 0px 0px 0px 10px;
            width:150Px;
        }
    </style>

    <script>
        require([
            "esri/map",
            "esri/Color",
            "esri/dijit/HomeButton",
            "esri/layers/FeatureLayer",
            "esri/renderers/UniqueValueRenderer",
            "esri/symbols/SimpleFillSymbol",
            "esri/symbols/SimpleLineSymbol",
            "esri/dijit/PopupTemplate",
            "esri/dijit/Legend",
            "dojo/domReady!"
        ], function(
                Map, Color,HomeButton,
                FeatureLayer,
                UniqueValueRenderer,
                SimpleFillSymbol,
                SimpleLineSymbol,
                PopupTemplate,
                Legend
        ) {

//            var map = new Map("map", {
//                basemap: "dark-gray",
//                center: [ -81.457, 28.591 ],
//                zoom: 9
//            });
//            var template = new PopupTemplate({
//                title: "District {DISTRICT}",
//                description: "{*}",
//                fieldInfos: [{
//                    fieldName: "DISTRICT",
//                    label: "Transportation District",
//                    format: { places: 0, digitSeparator: true }
//                }, {
//                    fieldName: "AADT",
//                    label: "Annual Average Daily Traffic",
//                    format: { places: 0, digitSeparator: true }
//                }]
//            });
//            var url = "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Florida_Annual_Average_Daily_Traffic/FeatureServer/0";
            var map = new Map("map",{
                basemap:"topo",
                center:[120.14,30.16],
                zoom:15
            });
            var hbt=new HomeButton({
                map:map
            }, "hbt");
            hbt.startup();
            var template=new PopupTemplate({
                title:"DL {DL}",
                description:"{*}",
                fieldInfos:[{
                    fieldName: "DL",
                    label: "地块类型",
                    format: {place: 0, digitSrparator: true}
                }]
            });
            var url="http://192.168.1.157:8399/arcgis/rest/services/zhxtd/ground_plan/MapServer/2";

//            var layer = new FeatureLayer(url, {
//                mode: FeatureLayer.MODE_AUTO,
//                outFields: "*",
//                infoTemplate: template
//            });
//
//
//            var renderer = new UniqueValueRenderer(null, "DISTRICT");
//            function createSymbol (color) {
//                return new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color(color), 1.5);
//            }
            var layer=new FeatureLayer(url,{
                mode:FeatureLayer.MODE_AUTO,
                outFields:"*",
                infoTemplate:template
            });
            var renderer =new UniqueValueRenderer(null,"DL");
            function createSymbol(color){
                return new SimpleFillSymbol().setColor(new Color(color))
            }

//            renderer.addValue({
//                value: "JZ",
//                symbol: createSymbol("#6EC4AE"),
//                label: "居住用地(Bartow)",
//                description: "SW Florida"
//            });
//            renderer.addValue({
//                value: "2",
//                symbol: createSymbol("#37A9B7"),
//                label: "District 2 (Jacksonville)",
//                description: "Northeast Florida"
//            });
//            renderer.addValue({
//                value: "3",
//                symbol: createSymbol("#D68989"),
//                label: "District 3 (Chipley)",
//                description: "Northwest Florida"
//            });
//            renderer.addValue({
//                value: "4",
//                symbol: createSymbol("#BC7EBA"),
//                label: "District 4 (Ft. Lauderdale)",
//                description: "Southeast Florida"
//            });
//            renderer.addValue({
//                value: "5",
//                symbol: createSymbol("#F97B60"),
//                label: "District 5 (Deland)",
//                description: "Central Florida"
//            });
//            renderer.addValue({
//                value: "6",
//                symbol: createSymbol("#7BFAEB"),
//                label: "District 6 (Miami)",
//                description: "South Florida"
//            });
//            renderer.addValue({
//                value: "7",
//                symbol: createSymbol("#A1D77E"),
//                label: "District 7 (Tampa)",
//                description: "West Central Florida"
//            });
//            renderer.addValue({
//                value: "8",
//                symbol: createSymbol("#FBDE7F"),
//                label: "District 8",
//                description: ""
//            });
//
//            renderer.setVisualVariables([{
//                type: "sizeInfo",
//                field: "AADT",
//                valueUnit: "unknown",
//                minSize: 0.75,
//                maxSize: 8.25,
//                minDataValue: 10,
//                maxDataValue: 150000
//            }]);
            renderer.addValue({
                value: "JZ",
                symbol: createSymbol([255, 255, 0]),
                label: "居住用地",
                description: "SW Florida"
            });
            renderer.addValue({
                value: "SZ",
                symbol: createSymbol([255, 223, 127]),
                label: "商住用地",
                description: "Northeast Florida"
            });
            renderer.addValue({
                value: "SY",
                symbol: createSymbol([255, 0,  0]),
                label: "商业用地",
                description: "Northeast Florida"
            });
            renderer.addValue({
                value: "GC",
                symbol: createSymbol([151, 151, 151]),
                label: "广场用地",
                description: "Northeast Florida"
            });
            renderer.addValue({
                value: "WT",
                symbol: createSymbol([255, 158, 129]),
                label: "文体用地",
                description: "Northeast Florida"
            });
            renderer.addValue({
                value: "LD",
                symbol: createSymbol([159, 255, 127]),
                label: "绿地",
                description: "Northeast Florida"
            });
            renderer.addValue({
                value: "GY",
                symbol: createSymbol([153, 95, 76]),
                label: "工业用地",
                description: "Northeast Florida"
            });
            renderer.addValue({
                value: "QT",
                symbol: createSymbol([165, 82, 124]),
                label: "其他用地",
                description: "Northeast Florida"
            });
            renderer.setVisualVariables([{
                type: "sizeInfo",
                field: "DL",
                valueUnit: "unknown",
                minSize: 0.75,
                maxSize: 8.25,
                minDataValue: 10,
                maxDataValue: 150000
            }]);

            layer.setRenderer(renderer);
            map.addLayer(layer);

            map.on("load", function(evt){
                var legend = new Legend({
                    map: map,
                    layerInfos: [{
                        layer: layer,
                        title: "地块"
                    }]
                }, "legendDiv");
                legend.startup();
            });
            map.on("click", function(evt){
                map.centerAt(evt.mapPoint);
            });
        });
    </script>
</head>
<body class="tundra">
<div id="map"></div>
<div id="info"><div id="legendDiv"></div></div>
<div id="hbt"></div>
</body>
</html>